<template>
  <div>
    <div v-if="isShow === 1">
      <el-card>
        <i class="el-icon-d-arrow-left"></i>
        <span class="text1">双链生鲜供应链平台:返回订单列表</span>
      </el-card>

      <el-card style="margin: 20px">
        <!-- 头部输入框 -->
        <el-form :inline="true" label-width="80px">
          <span>审计的地位：</span>
          <el-autocomplete
            width="400px"
            size="small"
            popper-class="my-autocomplete"
            v-model="state"
            :fetch-suggestions="querySearch"
            placeholder="请选择列表中或者输入搜索"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
          <el-form-item label="ID:">
            <el-input
              placeholder="请输入"
              style="width: 300px"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="medium"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh-left" size="medium" plain
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 按钮 -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="medium"
          @click="addData"
          >新建</el-button
        >
        <el-button
          class="upbtn"
          plain
          icon="el-icon-edit"
          size="medium"
          :disabled="checkList.length == 0"
          @click="salesUpdate(row, $index)"
          >批量更新</el-button
        >
        <!-- <el-button
          v-if="checkList.length == 0"
          icon="el-icon-delete"
          size="medium"
          disabled
          plain
          >批量删除</el-button
        >
        <el-button v-else icon="el-icon-delete" size="medium" type="danger"
          >批量删除</el-button
        > -->
        <!-- 弹框 -->
        <el-popover
          placement="right"
          v-model="popover"
          width="700"
          trigger="click"
        >
          <el-card>
            <div slot="header">
              <span style="font-size: 18px"
                >注意！你正在删除数据，执行之后不可恢复</span
              >
              <el-button
                style="
                  float: right;
                  font-size: 20px;
                  margin-top: -10px;
                  color: #333;
                "
                @click="popover = false"
                type="text"
                icon="el-icon-close"
              ></el-button>
            </div>
            <div class="tishi">
              一共 <span>{{ checkList.length }}</span> 项
            </div>
            <el-table :data="checkList" border class="table">
              <el-table-column prop="id" label="ID" width="80px">
              </el-table-column>
              <el-table-column prop="displayName" label="标题" width="80px">
              </el-table-column>
              <el-table-column label="买方" width="100">
                <template slot-scope="{ row }">
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="row.seller.id + '-' + row.buyer.displayName"
                    placement="right-end"
                  >
                    <span class="tooltip">{{ row.buyer.displayName }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="卖方" width="100">
                <template slot-scope="{ row }">
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="row.seller.id + '-' + row.buyer.displayName"
                    placement="right-end"
                  >
                    <span class="tooltip">{{ row.buyer.displayName }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="回报赞助商" width="100">
                <template slot-scope="{ row }">
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="
                      row.returnSponsor.id + '-' + row.returnSponsor.displayName
                    "
                    placement="right-end"
                  >
                    <span class="tooltip">{{
                      row.returnSponsor.displayName
                    }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                prop="returnComment"
                label="返回的评论"
                width="110"
              >
              </el-table-column>
              <el-table-column label="审计的地位" width="90">
                <template slot-scope="{ row }">
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="
                      row.auditStatus.id + '-' + row.auditStatus.displayName
                    "
                    placement="right-end"
                  >
                    <span class="tooltip">{{
                      row.auditStatus.displayName
                    }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="100">
              </el-table-column>
              <el-table-column
                prop="lastUpdateTime"
                label="最后更新时间"
                width="110"
              >
              </el-table-column>
            </el-table>
          </el-card>

          <el-button
            style="float: right; margin-left: 20px"
            @click="deletAll"
            type="primary"
            >确定</el-button
          >
          <el-button style="float: right" @click="popover = false"
            >取消</el-button
          >
          <!-- <el-button slot="reference">click 激活</el-button> -->
          <!-- <el-button
            class="deall"
            type="danger"
            slot="reference"
            :disabled="checkList.length == 0"
            size="small"
            icon="el-icon-delete"
            >批量删除</el-button
          > -->
          <el-button
            v-if="checkList.length == 0"
            icon="el-icon-delete"
            size="medium"
            slot="reference"
            disabled
            plain
            >批量删除</el-button
          >
          <el-button
            v-else
            icon="el-icon-delete"
            size="medium"
            slot="reference"
            type="danger"
            >批量删除</el-button
          >
        </el-popover>

        <el-button
          class="chu"
          icon="el-icon-document-delete"
          size="medium"
          plain
          >导出全部</el-button
        >
        <!-- 提示框 -->
        <div class="sum">
          <span v-if="checkList.length == 0"
            ><span>一共<i>10000</i>项</span
            >,请选择要操作的项来执行更多功能</span
          >
          <span v-else
            ><span>一共<i>10000</i>项</span>已经选择<i>{{ checkList.length }}</i
            >项<el-button type="text" class="text">清空</el-button>
          </span>
        </div>
        <!-- 表格  升降序用sortable-->
        <el-table
          :data="stateTime"
          style="width: 100%"
          @selection-change="checkOne"
        >
          <el-table-column type="selection" width="60"> </el-table-column>
          <el-table-column prop="id" label="ID" width="80px"> </el-table-column>
          <el-table-column prop="displayName" label="标题" width="80px">
          </el-table-column>
          <el-table-column label="买方" width="100">
            <template slot-scope="{ row }">
              <el-tooltip
                class="item"
                effect="light"
                :content="row.seller.id + '-' + row.buyer.displayName"
                placement="right-end"
              >
                <span class="tooltip">{{ row.buyer.displayName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="卖方" width="100">
            <template slot-scope="{ row }">
              <el-tooltip
                class="item"
                effect="light"
                :content="row.seller.id + '-' + row.buyer.displayName"
                placement="right-end"
              >
                <span class="tooltip">{{ row.buyer.displayName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="回报赞助商" width="100">
            <template slot-scope="{ row }">
              <el-tooltip
                class="item"
                effect="light"
                :content="
                  row.returnSponsor.id + '-' + row.returnSponsor.displayName
                "
                placement="right-end"
              >
                <span class="tooltip">{{ row.returnSponsor.displayName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="returnComment" label="返回的评论" width="110">
          </el-table-column>
          <el-table-column label="审计的地位" width="90">
            <template slot-scope="{ row }">
              <el-tooltip
                class="item"
                effect="light"
                :content="
                  row.auditStatus.id + '-' + row.auditStatus.displayName
                "
                placement="right-end"
              >
                <span class="tooltip">{{ row.auditStatus.displayName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="100">
          </el-table-column>
          <el-table-column
            prop="lastUpdateTime"
            label="最后更新时间"
            width="110"
          >
          </el-table-column>
          <el-table-column label="操作" width="width">
            <!-- <el-button type="text">详情</el-button>
            <el-button type="text">更新</el-button>
            <el-button type="text">删除</el-button> -->
            <template slot-scope="{ row, $index }">
              <span class="actionName" @click="salesInfo(row, $index)"
                >详情</span
              >
              <span class="actionName" @click="salesUpdate(row, $index)"
                >更新</span
              >
              <span class="actionName" @click="delet(row, $index)">删除</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->

        <el-pagination
          class="pagination"
          :page-size="pagesize"
          :page-count="7"
          :current-page="page"
          @current-change="pageChange"
          style="float: right; margin: 20px"
          layout="prev, pager, next"
          :total="total"
          size="small"
        >
        </el-pagination>
      </el-card>
    </div>

    <!-- 添加项目组件 -->
    <AddSales
      @goTrading="isShow = 1"
      v-if="isShow === 2"
      @addItem="addItem"
      @upItem="upItem"
      :upOrAdd="upOrAdd"
      :salesUpdate="upData"
    ></AddSales>
  </div>
</template>

<script>
import moment from "moment";
// 新建组件
import AddSales from "../components/AddSales.vue";
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "",
  data() {
    return {
      dataList: [], //所有数据
      newList: [], //每一页的数据
      checkList: [], //选中的数据
      isShow: 1, //用于切换组件
      total: 0, //总数据
      page: 1, //当前页数
      pagesize: 10, //每页数据
      allData: [], //总数据
      restaurants: [],
      state: "",
      input: "",
      upOrAdd: "",
      popover: false, //弹出框
      upData: {}, //更新数据
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "待审核（Pending）" },
        { value: "拒绝（rejected）" },
        { value: "通过（passed）" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    // tab里的方法
    formatter(row, column) {
      return row.address;
    },
    // 切换到添加页面
    addData() {
      this.upOrAdd = 1;
      this.isShow = 2;
    },

    //分页点击事件
    async pageChange(value) {
      // 点击每一个分页按钮发送请求获取数据
      await this.$API.sales.getData();
      //
      let b = this.allData.slice((value - 1) * 10, value * 10);
      // 赋值给每一页
      this.newList = b;
      // 将当前点击的值赋值,更新当前页
      this.page = value;
    },
    //跳转页面
    salesUpdate(row, index) {
      this.upOrAdd = 2;
      this.isShow = 2;
      this.upData = cloneDeep(row);
    },
    // 详情页
    salesInfo() {
      alert("详情页 ");
    },
    //更新数据
    upItem(val) {
      this.newList = this.newList.map((item) => {
        if (item.index == val.index) {
          item = val;
        }
        return item;
      });
    },
    //删除单个数据
    delet(row, index) {
      const { page } = this;
      console.log(this.page);

      // 删除当前展示页面
      this.newList = this.newList.filter((item) => item.index !== row.index);
      // 更新总数据数量
      this.allData = this.allData.filter((item) => item.index !== row.index);
      // 重现获取当前页数据
      this.newList = this.allData.slice((page - 1) * 10, page * 10);
      // 更新总数据
      this.total = this.allData.length;
      //判断删除最后一条数据时

      if (page - 1 == this.total / 10 && this.newList.length == 0) {
        this.newList = this.allData.slice((page - 2) * 10, (page - 1) * 10);
        this.page = this.total / 10;
      }
      this.$message.success("删除成功");
    },
    // 批量删除按钮
    deletAll() {
      this.popover = false;
      this.checkList.forEach((item) => {
        this.allData = this.allData.filter((val) => item.index !== val.index);
      });
      this.newList = this.allData.slice((this.page - 1) * 10, this.page * 10);
      this.total = this.allData.length;
      //判断删空最后一页数据时
      if (this.page - 1 == this.total / 10 && this.newList.length == 0) {
        this.newList = this.allData.slice(
          (this.page - 2) * 10,
          (this.page - 1) * 10
        );
        this.page = this.total / 10;
      }
      this.$message.success("删除成功");
    },
    // 获取数据
    async getData() {
      let result = await this.$API.sales.getData();
      // console.log(result);
      //展示数据 创建一个空的数组
      let a = [];
      // 遍历每一项
      result.sales.forEach((item) => {
        // 再遍历需要的数组
        item.returnOrderList.forEach((val) => {
          // 将需要的那一项存到数组中
          a.push(val);
        });
      });
      let num = 0;
      // 为每一项设置一个响应式的索引
      let b = a.map((item) => {
        this.$set(item, "index", num++);
        return item;
      });
      // 将加工好的需要的数据并且有索引的保存
      this.allData = b;
      //  this.newList = result.trading[0].contractOrderList
      // 每一页展示的数据截取10个
      this.newList = b.slice(0, 10);
      //  获取总页数
      this.total = b.length;
      //一条数据
      this.dataList = result.sales[0].returnOrderList[0];
    },
    // 点击复选框
    checkOne(val) {
      this.checkList = val;
    },

    //添加数据
    async addItem(item) {
      await this.$API.sales.getData();
      let abc = cloneDeep(this.dataList);
      abc.id = item.ID;
      abc.returnComment = item.comment; //评论
      abc.auditStatus.displayName = item.pargain; //审计
      abc.buyer.displayName = item.buy; //买家
      abc.displayName = item.name; //标题
      abc.lastUpdateTime = item.endTime;
      abc.createTime = item.startTime;
      abc.seller.displayName = item.sell; //卖家
      abc.returnSponsor.displayName = item.operation; //回报赞助商
      abc.index = item.index;
      // 总数组添加对象
      this.allData.unshift(abc);
      // 修改数据总数
      this.total = this.allData.length;
      // 修改展示数据
      this.newList = this.allData.slice(0, 10);
      // 添加完跳转第一页面
      this.page = 1;
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
    // 获取数据
    this.getData();
  },
  computed: {
    //计算时间
    stateTime() {
      return this.newList.map((item) => {
        item.createTime = moment(item.createTime).format("YYYY-MM-DD hh:mm");
        item.lastUpdateTime = moment(item.lastUpdateTime).format(
          "YYYY-MM-DD hh:mm"
        );
        return item;
      });
    },
  },
  components: {
    AddSales,
  },
};
</script>

<style lang='less' scoped>
.upbtn {
  margin-right: 12px;
}
.chu {
  margin-left: 12px;
}
.pagination {
  width: 100%;
  text-align: center;
  ::v-deep.el-pager {
    .number {
      &.active {
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        border: 1px solid #1890ff;
      }
    }
  }
}
.tishi {
  width: 100%;
  height: 50px;
  border-radius: 4px;
  border: 1px solid #ffe58f;
  background: #fffbe6;
  padding: 5px 0 0 30px;
  margin-bottom: 20px;
  span {
    color: #1890ff;
    font-size: 14px;
  }
  .deall {
    margin: 0 20px;
  }
}
.sum {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: 20px 0;
  padding-left: 20px;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 10px;
  i {
    color: #1890ff;
    font-style: normal;
  }
  .text {
    font-size: 16px;
    text-align: center;
    margin-left: 20px;
  }
}
.tooltip {
  border: 1px solid #beeda0;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #52c45e;
  border-radius: 5px;
  background: #f6ffed;
}

.actionName {
  color: #5492ff;
  margin-right: 16px;
  position: relative;
  cursor: pointer;
  &::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 12px;
    background: rgb(218, 216, 216);
    top: 2px;
    left: -8px;
  }
  &:first-child::after {
    content: "";
    position: absolute;
    width: 0;
  }
}
</style>
